<template>
	<view class="page">
		<view class="body">
			<view class="body_title">
				设备编号：{{service_id}}
			</view>
			<view class="body_cont">
				<view class="justify-content-center">
					<view class="body_cont_image">
						<image src="../../static/QRcode/icon.png" mode="" class="img"></image>
					</view>
				</view>
				<view class="justify-content-center">
					<view class="body_cont_text">
						支持信用卡|花呗付款
					</view>
				</view>
				<view class="justify-content-center">
					<view class="body_cont_image2">
						<image :src="seller_QR_code" mode="" class="img"></image>
					</view>
				</view>
				<view class="justify-content-center">
					<view class="body_cont_text2">
						设备编号：{{service_id}}
					</view>
				</view>
				<view class="justify-content-center">
					<view class="body_cont_image3" v-for="(item,index) in imgList" :key="index">
						<view class="image">
							<image :src="item.img" mode="" class="img"></image>
						</view>
						<text class="text">{{item.text}}</text>
					</view>
				</view>
				<view class="body_cont_bto justify-content-center">
					淘物熊客服电话:{{service_tel}}
				</view>
			</view>
			<view class="btn_css justify-content-sp">
				<view class="btn_cs" @click="baocun">
					保存收款码
				</view>
				<view class="" style="color: #b5b5b5;">
					|
				</view>
				<view class="btn_cs" @click="update">
					更换收款码
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getIndex,
		updateSNo
	} from '../../api/index/index.js';
	export default {
		data() {
			return {
				seller_QR_code: '',
				imgList: [{
						id: 0,
						img: '../../static/QRcode/1.png',
						text: '银联'
					},
					{
						id: 1,
						img: '../../static/QRcode/wc.png',
						text: '微信'
					},
					{
						id: 2,
						img: '../../static/QRcode/hb.png',
						text: '花呗'
					},
					{
						id: 3,
						img: '../../static/QRcode/zfb.png',
						text: '支付宝'
					},
				],
				service_tel: '',
				service_id: ''
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			// 获取商家中心信息
			init() {
				getIndex().then(res => {
					this.seller_QR_code = res.data.qrcode;
					this.service_tel = res.data.service_tel;
					this.service_id = res.data.service_id;
				})
			},
			baocun() {
				uni.downloadFile({
					url: this.seller_QR_code, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
						}
					}
				});
			},
			update() {
				var data = {
					service_id: this.service_id
				};
				updateSNo(data).then(res => {
					uni.showToast({
						"icon": "none",
						"title": res.msg
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {

		.body {
			min-height: 100%;

			.body_title {
				text-align: center;
				font-size: 15px;
			}

			.body_cont {
				margin: 30rpx 0;
				border: 1px solid #b5b5b5;
				border-radius: 15rpx;
				background-image: url('../../static/QRcode/bj.png');
				background-size: 100% 50%;
				background-repeat: no-repeat;
				background-position: bottom;

				.body_cont_image {
					width: 120px;
					height: 40px;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.body_cont_text {
					background-color: red;
					color: white;
					padding: 10rpx 30rpx;
					border-radius: 30rpx;
					margin: 50rpx;
					letter-spacing: 10rpx;
					font-size: 15px;
				}

				.body_cont_image2 {
					padding: 30rpx;
					width: 150px;
					height: 150px;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.body_cont_text2 {
					padding: 30rpx;
					color: white;
				}

				.body_cont_image3 {
					text-align: center;
					padding: 30rpx 0;

					.image {
						padding: 20rpx 30rpx;
						width: 40px;
						height: 40px;
					}

					.img {
						width: 100%;
						height: 100%;
					}

					.text {
						color: white;
					}
				}

				.body_cont_bto {
					color: white;
					padding: 30rpx;
					font-size: 15px;
				}
			}

			.btn_css {
				padding: 30rpx 100rpx;
				font-size: 12px;

				.btn {}
			}
		}
	}
</style>